<script setup>
	/* 
	 
	 
	 测试用的组件
	 自己看见代码重复封装的
	 
	 */
	
  import { computed, ref } from 'vue'
import { deleteUserAPI, showUserInfoAPI } from '@/apis/login.js';
import {onHide,onShow} from '@dcloudio/uni-app'
  const swipeOptions = ref([
    {
      text: '删除',
      style: {
        backgroundColor: '#dd524d',
      },
    },
  ])
    // 生命周期 页面显示的时候执行方法
   onShow(()=>{
	  showUserInfo()
  })
  // 获取家属列表
  const showUserlist=ref([])
  function showUserInfo(){
	  showUserInfoAPI().then((res)=>{
		  console.log(res);
		  showUserlist.value=res.data
	  }).catch((err)=>{
		  console.log(err);
	  })
  }
  
 const swipdelete=(e,id)=>{
	 uni.showLoading()
	   console.log(e,id);
	   deleteUserAPI(id).then(()=>{
		   
		   showUserInfo()
		   uni.showToast({
		   	title:'删除成功',
			icon:'none'
		   })
	   }).catch(()=>{
		   uni.showToast({
		   	title:'删除失败',
			icon:'none'
		   })
	   }).finally(()=>{
		   uni.hideLoading()
	   })
  }
</script>

<template>
  <scroll-page>
    <view class="archive-page">
     <!-- <view class="archive-tips">最多可添加6人</view> -->

      <uni-swipe-action>
        <uni-swipe-action-item v-for="item in showUserlist" :key="item.id" :right-options="swipeOptions" @click="swipdelete($event,item.id)">
          <view class="archive-card" :class="{active:item.defaultFlag == 1}">
            <view class="archive-info">
              <text class="name">{{item.name}}</text>
              <text class="id-card">{{ item.idCard  }}</text>
              <text class="default" v-if="item.defaultFlag==1">默认</text>
            </view>
            <view class="archive-info">
              <text class="gender">{{item.gender == 0 ? '女':'男'}}</text>
              <text class="age">{{item.age}}岁</text>
            </view>
            <navigator
              hover-class="none"
              class="edit-link"
              :url="'/subpackages/subpack_my/form/index?id='+item.id"
            >
              
			  <uni-icons type="compose"  color="#16C2A3" size="30"></uni-icons>
			 
            </navigator>
          </view>
        </uni-swipe-action-item>
      </uni-swipe-action>

      <!-- 添加按钮 -->
      <view v-if="true" class="archive-card">
        <navigator
          class="add-link"
          hover-class="none"
          url="/subpackages/subpack_my/form/index"
        >
          <uni-icons color="#16C2A3" size="24" type="plusempty" />
          <text class="label" >添加患者</text>
        </navigator>
      </view>
    </view>
  </scroll-page>
</template>

<style lang="scss">
 
.archive-page {
  padding: 30rpx;
}

.archive-tips {
  line-height: 1;
  padding-left: 10rpx;
  margin: 30rpx 0;
  font-size: 26rpx;
  color: #6f6f6f;
}

.archive-card {
  display: flex;
  flex-direction: column;
  justify-content: center;

  position: relative;

  height: 180rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  border-radius: 10rpx;
  box-sizing: border-box;
  border: 1rpx solid transparent;
  background-color: #f6f6f6;

  &.active {
    background-color: rgba(44, 181, 165, 0.1);
    // border: 1rpx solid #16c2a3;

    .default {
      display: block;
    }
  }

  .archive-info {
    display: flex;
    align-items: center;
    color: #6f6f6f;
    font-size: 28rpx;
    margin-bottom: 10rpx;
  }

  .name {
    margin-right: 30rpx;
    color: #121826;
    font-size: 32rpx;
    font-weight: 500;
  }

  .id-card {
    color: #121826;
  }

  .gender {
    margin-right: 30rpx;
  }

  .default {
    display: none;
    height: 36rpx;
    line-height: 36rpx;
    text-align: center;
    padding: 0 12rpx;
    margin-left: 30rpx;
    border-radius: 4rpx;
    color: #fff;
    font-size: 24rpx;
    background-color: #16c2a3;
  }
}

.edit-link {
  position: absolute;
  top: 50%;
  right: 30rpx;

  transform: translateY(-50%);
}

.add-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .label {
    margin-top: 10rpx;
    font-size: 28rpx;
    color: #16c2a3;
  }
}

:deep(.uni-swipe_button-group) {
  bottom: 30rpx;
}

</style>